<template>
  <el-card class="table-card">
    <template #header>
      <div class="table-header">
        <span>银行流水列表</span>
        <div class="table-actions">
          <el-button-group>
            <el-button :icon="Sort" @click="handleSort('transaction_date')">
              按交易日期
            </el-button>
            <el-button :icon="Sort" @click="handleSort('amount')">
              按交易金额
            </el-button>
          </el-button-group>
          
          <el-button 
            link
            :icon="Setting" 
            @click="showColumnSettings"
          >
            列设置
          </el-button>
          
          <el-button 
            link
            :icon="View" 
            @click="toggleViewMode"
          >
            {{ viewMode === 'table' ? '卡片视图' : '表格视图' }}
          </el-button>
        </div>
      </div>
    </template>

    <!-- 表格视图 -->
    <div v-show="viewMode === 'table'">
      <TransactionTable
        :table-data="tableData"
        :loading="loading"
        :get-relevant-analyses="getRelevantAnalyses"
        :get-analysis-icon="getAnalysisIcon"
        :get-priority-color="getPriorityColor"
        :get-match-status-text="getMatchStatusText"
        :get-match-status-type="getMatchStatusType"
        :format-currency="formatCurrency"
        :format-date="formatDate"
        :format-time="formatTime"
        :format-relative-time="formatRelativeTime"
        :mask-account="maskAccount"
        :truncate-text="truncateText"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
        @sort-change="handleSortChange"
        @show-detail="showTransactionDetail"
        @manual-match="handleManualMatch"
        @edit-transaction="editTransaction"
        @more-action="handleMoreAction"
        @match-click="handleMatchClick"
        @analysis-click="handleAnalysisClick"
      />
    </div>

    <!-- 卡片视图 -->
    <div v-show="viewMode !== 'table'" class="card-view">
      <TransactionCard
        :transactions="tableData"
        :get-data-source-type="getDataSourceType"
        :get-data-source-text="getDataSourceText"
        :get-match-status-type="getMatchStatusType"
        :get-match-status-text="getMatchStatusText"
        :format-currency="formatCurrency"
        :format-date="formatDate"
        :truncate-text="truncateText"
        :icons="{
          View, Connection, Edit, More, CopyDocument, Delete, CircleCheck,
          Filter, Check, Download
        }"
        @card-click="showTransactionDetail"
        @manual-match="handleManualMatch"
        @edit="editTransaction"
        @more-action="handleMoreAction"
        @match-status-click="handleMatchClick"
      />
    </div>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        :page-sizes="[20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { 
  Sort, Setting, View, Connection, Edit, More, 
  CopyDocument, Delete, CircleCheck, Filter, Check, Download
} from '@element-plus/icons-vue'
import TransactionTable from './TransactionTable.vue'
import TransactionCard from './TransactionCard.vue'

// 定义组件props
const props = defineProps<{
  tableData: any[]
  loading: boolean
  viewMode: 'table' | 'card'
  total: number
  currentPage: number
  pageSize: number
  getRelevantAnalyses: Function
  getAnalysisIcon: Function
  getPriorityColor: Function
  getMatchStatusText: Function
  getMatchStatusType: Function
  getDataSourceType: Function
  getDataSourceText: Function
  formatCurrency: Function
  formatDate: Function
  formatTime: Function
  formatRelativeTime: Function
  maskAccount: Function
  truncateText: Function
}>()

// 定义组件emits
const emit = defineEmits<{
  (e: 'update:viewMode', value: 'table' | 'card'): void
  (e: 'update:currentPage', value: number): void
  (e: 'update:pageSize', value: number): void
  (e: 'handleSort', field: string): void
  (e: 'handleSortChange', data: any): void
  (e: 'handleSelectionChange', selection: any[]): void
  (e: 'handleRowClick', row: any): void
  (e: 'showTransactionDetail', transaction: any): void
  (e: 'handleManualMatch', transaction: any): void
  (e: 'editTransaction', transaction: any): void
  (e: 'handleMoreAction', command: string, transaction: any): void
  (e: 'handleMatchClick', transaction: any): void
  (e: 'handleAnalysisClick', analysis: any, transaction: any): void
  (e: 'showColumnSettings'): void
  (e: 'handleSizeChange', val: number): void
  (e: 'handleCurrentChange', val: number): void
}>()

// 方法
const handleSort = (field: string) => {
  emit('handleSort', field)
}

const handleSortChange = (data: any) => {
  emit('handleSortChange', data)
}

const handleSelectionChange = (selection: any[]) => {
  emit('handleSelectionChange', selection)
}

const handleRowClick = (row: any) => {
  emit('handleRowClick', row)
}

const showTransactionDetail = (transaction: any) => {
  emit('showTransactionDetail', transaction)
}

const handleManualMatch = (transaction: any) => {
  emit('handleManualMatch', transaction)
}

const editTransaction = (transaction: any) => {
  emit('editTransaction', transaction)
}

const handleMoreAction = (command: string, transaction: any) => {
  emit('handleMoreAction', command, transaction)
}

const handleMatchClick = (transaction: any) => {
  emit('handleMatchClick', transaction)
}

const handleAnalysisClick = (analysis: any, transaction: any) => {
  emit('handleAnalysisClick', analysis, transaction)
}

const showColumnSettings = () => {
  emit('showColumnSettings')
}

const toggleViewMode = () => {
  emit('update:viewMode', props.viewMode === 'table' ? 'card' : 'table')
}

const handleSizeChange = (val: number) => {
  emit('handleSizeChange', val)
}

const handleCurrentChange = (val: number) => {
  emit('handleCurrentChange', val)
}
</script>

<style scoped lang="scss">
.table-card {
  .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
  }
  
  .transactions-table {
    :deep(.el-table__body) {
      .el-table__cell {
        padding: 8px 4px;
      }
    }
    
    // 移动端适配
    @media (max-width: 767px) {
      :deep(.el-table__body) {
        .el-table__cell {
          padding: 6px 2px;
          font-size: 12px;
        }
      }
      
      .action-buttons {
        flex-wrap: wrap;
        gap: 4px;
        
        .el-button {
          padding: 4px 6px;
          font-size: 12px;
        }
      }
    }
  }
}

.card-view {
  .transaction-card {
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .card-content {
      .amount-section {
        text-align: center;
        margin-bottom: 15px;
        
        .amount {
          font-size: 18px;
          font-weight: 600;
          
          &.income {
            color: #67c23a;
          }
          
          &.expense {
            color: #f56c6c;
          }
        }
      }
      
      .payer-section {
        margin-bottom: 15px;
        
        .payer-name {
          font-weight: 500;
          margin-bottom: 5px;
        }
        
        .transaction-date {
          color: #909399;
          font-size: 13px;
        }
      }
      
      .status-section {
        display: flex;
        justify-content: space-between;
      }
    }
  }
  
  // 移动端适配
  @media (max-width: 767px) {
    .el-col {
      margin-bottom: 12px;
    }
    
    .transaction-card {
      .card-header {
        .transaction-id {
          font-size: 12px;
        }
      }
      
      .card-content {
        .amount-section {
          .amount {
            font-size: 16px;
          }
        }
        
        .payer-section {
          .payer-name {
            font-size: 14px;
          }
          
          .transaction-date {
            font-size: 11px;
          }
        }
        
        .status-section {
          gap: 4px;
          
          .el-tag {
            font-size: 10px;
            padding: 0 4px;
          }
        }
      }
    }
  }
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
